<template>
    <div class="demo">
        <h1>{{ title }}</h1>
        <button @click="increment">Click me</button>
        <p>Count: {{ count }}</p>

        <!-- 模拟扫雷盘 -->
        <button @click="initAll">init</button>

        <table class="sl-table">
            <tr v-for="(row, rowIdx) in mineLayer" :key="rowIdx" class="sl-tr">
                <td v-for="(cell, colIdx) in row" :key="colIdx" class="sl-td">{{ cell }}</td>
            </tr>
        </table>
        <br />
        <table class="sl-table" @contextmenu.prevent>
            <tr v-for="(row, rowIdx) in showLayer" :key="rowIdx" class="sl-tr">
                <td v-for="(cell, colIdx) in row" :key="colIdx" class="sl-td" :class="'reveal-type'+cell.revealMark"
                    @mousedown="handleEvent({ row: rowIdx, col: colIdx }, $event)"
                    @dblclick="handleDblclick({row:rowIdx,col:colIdx})">{{ cell.content }}</td>
            </tr>
        </table>
        {{ endInfo }}

    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useInit } from './useInit';

const title = ref('Vue 3 Setup Template');
const count = ref(0);


function increment() {
    count.value++;
}

/***************** 扫雷逻辑 *****************/

const { mineLayer, statisticsLayer, revealLayer,
    initAll, handleReveal, handleFlag, handleRevealRound, showLayer
} = useInit()

function handleEvent({ row, col }, event) {
    console.log('md:',{row,col},event.button);
    // 左键0，滚轮1，右键2
    const mdType = event.button
    switch (mdType) {
        case 0:
            handleReveal({ row, col })
            break;
        case 1:
            handleRevealRound({ row, col })
            break;
        case 2:
            handleFlag({ row, col })
            break;
    }
}
function handleDblclick({row,col}){
    handleRevealRound({row,col})
}


</script>

<style scoped>
.demo {
    text-align: center;
}

button {
    margin-top: 20px;
}

.sl-table {
    border-collapse: collapse;
    border: 1px solid #000;
}

.sl-td {
    width: 24px;
    height: 24px;
    border: 1px solid #000;
}
.reveal-type0{
    background: #fff;
}
.reveal-type1{
    background:#ccc;
}
.reveal-type2{
    background:yellow;
}
.reveal-type3{
    background-color: red;
}
</style>